<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
    <title>商品级差管理</title>
    <link rel="stylesheet" type="text/css" href="static/admin/layui/css/layui.css"/>
    <link rel="stylesheet" type="text/css" href="static/admin/css/admin.css"/>
</head>

<body>
<div class="wrap-container welcome-container">
    <div class="wrap-container clearfix">
        <div class="column-content-detail">
            <div class="layui-form-item">
                <form class="layui-form" style="display: inline-block;">
                    <select name="goods" class="">
                        <option value="">请选择商品</option>
                    </select>
                </form>
                <button class="layui-btn layui-btn-small layui-btn-normal searchBtn">搜索</button>
                <button class="layui-btn layui-btn-small layui-btn-normal addBtn"><i class="layui-icon">&#xe654;</i>
                </button>
            </div>

            <div class="layui-form" id="table-list">
                <table class="layui-table" lay-even lay-skin="nob">
                    <thead>
                    <tr>
                        <th>商品</th>
                        <th>角色</th>
                        <th>级差奖</th>
                        <th>同级奖</th>
                        <th>直销</th>
                        <th>操作</th>
                    </tr>
                    </thead>
                    <tbody class="table-cont">
                    <!--<tr>-->
                    <!--<td class="item-good">15037677777</td>-->
                    <!--<td class="item-role">15037677888</td>-->
                    <!--<td class="item-different">45176521548</td>-->
                    <!--<td class="item-sibling">宝宝</td>-->
                    <!--<td class="item-selling">12313</td>-->
                    <!--<td>-->
                    <!--<div class="layui-inline">-->
                    <!--<button class="layui-btn  layui-btn-sm layui-btn-normal edit-btn" data-id="1">-->
                    <!--<i class="layui-icon">&#xe642;</i>-->
                    <!--</button>-->
                    <!--<button class="layui-btn  layui-btn-sm layui-btn-danger del-btn" data-id="1">-->
                    <!--<i class="layui-icon">&#xe640;</i>-->
                    <!--</button>-->
                    <!--</div>-->
                    <!--</td>-->
                    <!--</tr>-->
                    </tbody>
                </table>
                <!-- <div id="page" class="page-wrap"></div> -->
            </div>
        </div>
    </div>
</div>
<!--用户编辑弹窗-->
<div class="level-edit-popup">
    <form class="layui-form" id="form">
        <div class="layui-form-item">
            <label class="layui-form-label">商品名称</label>
            <div class="layui-input-inline">
                <select name="good" data-name="商品" required lay-verify="required" placeholder="请输入商品"
                        autocomplete="off" class="required layui-input">
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">角色</label>
            <div class="layui-input-inline">
                <select name="role" data-name="角色" required lay-verify="required" placeholder="请输入商品"
                        autocomplete="off" class="required layui-input">
                    <option value="VIP">VIP</option>
                    <option value="M1">M1</option>
                    <option value="M2">M2</option>
                    <option value="M3">M3</option>
                    <option value="M4">M4</option>
                    <option value="M5">M5</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">级差奖</label>
            <div class="layui-input-inline">
                <input type="text" name="different" data-name="级差奖" required lay-verify="required" placeholder="请输入级差奖"
                       autocomplete="off" class="layui-input required">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">同级奖</label>
            <div class="layui-input-inline">
                <input type="text" name="sibling" data-name="同级奖" required lay-verify="required" placeholder="请输入同级奖"
                       autocomplete="off" class="layui-input required">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">直销</label>
            <div class="layui-input-inline">
                <input type="text" name="selling" data-name="直销" required lay-verify="required" placeholder="请输入直销"
                       autocomplete="off" class="layui-input required">
            </div>
        </div>
    </form>
</div>

<!-- 用户编辑弹窗 -->

<script src="static/admin/layui/layui.js" type="text/javascript" charset="utf-8"></script>
<script src="static/admin/js/baseUrl.js"></script>
<script type="text/javascript">
    layui.use(['layer', 'jquery', 'laypage', 'form'], function () {
        var layer = layui.layer;
        var $ = layui.jquery;
        var laypage = layui.laypage;
        var layform = layui.form;
        // 请求参数
        var pagedata = {
            pageNumber: 1,
            pageSize: 10
        };
        // 初始数据请求
        getList(pagedata);
        // 商品数据请求
        getGoodList();

        function getGoodList() {
            $.ajax({
                url: baseUrl + "/products/selectProductsList",
                // data: params,
                type: 'get',
                contentType: "application/json",
                dataType: "json",
                crossDomain: true,     //跨域
                xhrFields: {withCredentials: true},//跨域
                success: function (data) {
                    // console.log(data)
                    var data = data.data;
                    var html = '';
                    for (i = 0; i < data.length; i++) {
                        html += `<option value="${data[i].id}">${data[i].productName}</option>`
                    }
                    $("select[name=goods]").append(html)
                    layform.render();

                }, error: function () {
                    console.log(222)
                }
            })
        }

        // 获取数据
        function getList(pagedata) {
            $.ajax({
                url: baseUrl + '/gradation/getGradationList',
                data: JSON.stringify(pagedata),
                type: 'POST',
                contentType: "application/json",
                dataType: "json",
                crossDomain: true,     //跨域
                xhrFields: {withCredentials: true},//跨域
                success: function (data) {
                    var data = data.data.list;
                    var html = "";
                    for (var i = 0; i < data.length; i++) {
                        html += `<tr>
                            <td class="item-good">${data[i].productName}</td>
                            <td class="item-role">${data[i].role}</td>
                            <td class="item-different">${data[i].gradation}</td>
                            <td class="item-sibling">${data[i].identical}</td>
                            <td class="item-selling">${data[i].direct}</td>
                            <td>
                                <div class="layui-inline">
                                    <button class="layui-btn  layui-btn-sm layui-btn-normal edit-btn" data-id="${data[i].id}">
                                        <i class="layui-icon">&#xe642;</i>
                                    </button>
                                    <button class="layui-btn  layui-btn-sm layui-btn-danger del-btn" data-id="data[i].id">
                                        <i class="layui-icon">&#xe640;</i>
                                    </button>
                                </div>
                            </td>
                        </tr>`
                    }
                    $('.table-cont').html(html);
                },
                error: function () {

                },
                complete: function () {

                }
            })
        }

        // 监听编辑按钮
        $('.table-cont').on('click', '.edit-btn', function () {
            var id = $(this).attr("data-id");
            $('select[name=role]').val($(this).parents('tr').find('.item-role').html());
            $('input[name=different]').val($(this).parents('tr').find('.item-different').html());
            $('input[name=sibling]').val($(this).parents('tr').find('.item-sibling').html());
            $('input[name=selling]').val($(this).parents('tr').find('.item-selling').html());
            $.ajax({
                url: baseUrl + "/products/selectProductsList",
                type: 'get',
                contentType: "application/json",
                dataType: "json",
                crossDomain: true,     //跨域
                xhrFields: {withCredentials: true},//跨域
                success: function (data) {
                    var data = data.data;
                    var html = '';
                    for (i = 0; i < data.length; i++) {
                        html += `<option value="${data[i].id}">${data[i].productName}</option>`
                    }
                    $("select[name=good]").append(html)
                    layform.render();
                    layer.open({
                        zIndex: 1000,
                        type: 1,
                        content: $('.level-edit-popup'),
                        title: '编辑',
                        maxmin: true,
                        maxWidth: "450",
                        shadeClose: true, //点击遮罩关闭层
                        area: 'auto',
                        btn: ['提交', '取消'],
                        yes: function (index, layero) {
                            submitFun(id);
                        },
                        end: function () {
                            clearFun();
                        }
                    })

                }, error: function () {
                    console.log(222)
                }
            })
        })
        // 监听删除按钮
        $('.table-cont').on('click', '.del-btn', function () {
            var id = $(this).attr("data-id");
            data = JSON.stringify(data);
            layer.confirm('确定删除该条信息吗？', {icon: 5}, function (index) {
                layer.close(index);
                // 发起删除请求
                var loading = layer.load(1, {shade: [0.3, '#000']});
                $.ajax({
                    url: baseUrl + '/gradation/delGradationById/' + id,
                    type: 'get',
                    // data:{
                    //     id:id
                    // },
                    contentType: "application/json",
                    dataType: "json",
                    crossDomain: true,     //跨域
                    xhrFields: {withCredentials: true},//跨域
                    success: function (res) {
                        console.log(res)
                        layer.msg(res.data, {icon: res.code, time: 1000}, function () {
                            res.code == 1 && location.reload();//刷新页面
                        });
                    },
                    error: function () {
                        layer.msg('网络发生故障，请稍后再试', {icon: 0, time: 1000});
                    },
                    complete: function () {
                        layer.close(loading);
                    }
                })
            })
        })

        // 监听搜索按钮
        $(".searchBtn").click(function () {
            var productId = $('select[name=goods]').val()
            pagedata = {
                productId: productId,
                pageSize: 10,
                pageNumber: 1

            }
            getList(pagedata)
        })

        // 监听添加按钮
        $('.addBtn').click(function () {
            layer.open({
                zIndex: 1000,
                type: 1,
                content: $('.level-edit-popup'),
                title: '添加',
                maxmin: true,
                maxWidth: "450",
                shadeClose: true, //点击遮罩关闭层
                area: 'auto',
                btn: ['提交', '取消'],
                yes: function (index, layero) {
                    submitFun();

                },
                end: function () {
                    clearFun();
                }
            })
        });

        // 提交
        function submitFun(id) {
            var num = 0;
            var str = "";
            $("#form input.required").each(function (n) {
                if ($(this).val() == "") {
                    layer.alert(str += "" + $(this).data("name") + "不能为空！\r\n", {
                        title: '提示框',
                        icon: 0,
                    });
                    num++;
                    return false;
                }
            });
            if (num > 0) {
                return false;
            } else {
                var loading = layer.load(1, {shade: [0.3, '#000']});
                var param = $("#form").serialize().split("&");
                console.log(param);
                var productId = param[0].split("=")[1];
                var role = param[1].split("=")[1];
                var gradation = param[2].split("=")[1];
                var identical = param[3].split("=")[1];
                var direct = param[4].split("=")[1];
                var data = {
                    id: id,
                    productId: productId,
                    role: role,
                    gradation: gradation,
                    identical: identical,
                    direct: direct
                }
                console.log(data);
                data = JSON.stringify(data);
                $.ajax({
                    url: baseUrl + '/gradation/updateGradation',
                    type: 'post',
                    data: data,
                    contentType: "application/json",
                    dataType: "json",
                    crossDomain: true,     //跨域
                    xhrFields: {withCredentials: true},//跨域
                    success: function (res) {
                        // .attr("display","none");
                        console.log($(this).parent().parent())

                        layer.msg(res.data, {icon: res.code, time: 1000}, function () {
                            res.code == 1 && location.reload();//刷新页面
                        });
                    },
                    error: function () {
                        layer.msg('网络发生故障，请稍后再试', {icon: 0, time: 1000});
                    },
                    complete: function () {
                        layer.close(loading);
                    }
                })
            }
        };

        // 关闭
        function clearFun() {
            $("#form input").each(function (n) {
                $(this).val('');
            });
        };

    })
</script>
</body>

</html>
